  <template>
  <div>
    <!-- 头 毛毛写的头部页面 -->

    <div class="header">
      <div>
        <img
          src="./assets/新建文件夹/logo_c27d29c.png"
          alt=""
          style="margin-right: 120px"
        />
      </div>
      <div>
        <ul>
          <li class="nav" v-for="(item, i) in items" :key="i" @click="now = i">
            <router-link to="" :class="{ active: now == i }">{{
              item
            }}</router-link>
          </li>
        </ul>
      </div>
      <div>
        <img
          src="./assets/新建文件夹/sphonenum_5e61eaf.png"
          alt=""
          style="width: 185px; margin-left: 50px"
        />
      </div>
    </div>
    <!-- 固定定位 -->
    <div class="join">
      <img src="./assets/新建文件夹/zx2_fca535e.gif" style="width: 120px" />
      <div class="add">
        <img src="./assets/新建文件夹/zx3_8ba6ca8.png" style="width: 150px" />
      </div>
    </div>
    <div class="phone">
      <dir class="icon">
        <img class="wc" src="./assets/新建文件夹/wechat3_d1b1a7a.png" alt="" />
      </dir>
      <dir class="icon1">
        <img class="wc1" src="./assets/新建文件夹/wechat4_631fe01.png" alt="" />
      </dir>
      <a href="#">
        <div class="icon2"></div>
      </a>
    </div>
    <!-- 主体轮播 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide class="s1">
        <div class="bg">
          <img src="./assets/新建文件夹/bg1_c2b861d.jpg" style="width: 100vw" />
          <div class="download">
            <img
              class="m1"
              src="./assets/新建文件夹/toptit_71513e7.png"
              alt=""
            />
            <img
              class="m2"
              src="./assets/新建文件夹/slogan_66777e2.png"
              alt=""
            />
            <img
              class="m3"
              src="./assets/新建文件夹/wecaht_eea31da.png"
              alt=""
            />
          </div>
          <div class="girl">
            <img src="./assets/新建文件夹/girl_a2c668c.png" alt="" />
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="s2">
          <div>
            <img src="./assets/新建文件夹/tit1_73b58f9.png" alt="" />
            <p>家庭服务快捷下单，尽享悠闲生活</p>
          </div>
          <div class="s3">
            <ul>
              <li class="m4">
                <img src="./assets/新建文件夹/service1_be44146.png" alt="" />
                <p>日常保洁</p>
                <p>深度保洁</p>
                <p>长期保洁</p>
                <p>擦玻璃</p>
                <p>新居开荒</p>
                <p>厨房保养</p>
                <p>卫生间保养</p>
                <p>地板打蜡</p>
                <p>皮沙发保养</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service2_f5dca9c.png" alt="" />
                <p>保姆</p>
                <p>月嫂</p>
                <p>育儿嫂</p>
                <p>家庭长期做饭</p>
                <p>临时看护</p>
                <p>老人陪护</p>
                <p>老人助洁</p>
                <p>催乳服务</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service3_d7d7804.png" alt="" />
                <p>家庭搬家</p>
                <p>日式搬家</p>
                <p>企业搬家</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service4_e93f973.png" alt="" />
                <p>管道疏通</p>
                <p>换锁</p>
                <p>净水器芯更换</p>
                <p>空调维修</p>
                <p>空调加氟</p>
                <p>洗衣机维修</p>
                <p>油烟机维修</p>
                <p>冰箱维修</p>
                <p>热水器维修</p>
                <p>微波炉维修</p>
                <p>净水器安装</p>
                <p>马桶维修</p>
                <p>灯具安装</p>
                <p>换纱窗</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service5_9e6e218.png" alt="" />
                <p>油烟机清洗</p>
                <p>冰箱清洗</p>
                <p>空调清洗</p>
                <p>洗衣机清洗</p>
                <p>饮水机清洗</p>
                <p>微波炉清洗</p>
                <p>电烤箱清洗</p>
                <p>消毒柜清洗</p>
                <p>灶台清洗</p>
                <p>热水器清洗</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service6_c1551ec.png" alt="" />
                <p>深度除螨</p>
                <p>除甲醛</p>
                <p>汽车除醛</p>
                <p>甲醛检测</p>
                <p>地板打蜡</p>
                <p>CMA空气质量检测</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service7_1787dc3.png" alt="" />
                <p>儿童房换新</p>
                <p>卫生间换新</p>
                <p>换地板</p>
                <p>换地砖</p>
                <p>换吊顶</p>
                <p>换壁纸</p>
                <p>换墙漆</p>
                <p>防水补漏</p>
                <p>墙面地面维修</p>
                <p>家具杂修</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/service8_80c854d.png" alt="" />
                <p>办公室保洁</p>
                <p>公寓保洁</p>
                <p>企业开荒保洁</p>
                <p>店铺招牌清洗</p>
                <p>地毯清洗</p>
                <p>中央空调清洗</p>
                <p>中央空调维修</p>
                <p>企业绿植租摆</p>
                <p>办公室除甲醛</p>
                <p>企业搬迁</p>
                <p>企业速运</p>
              </li>
            </ul>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="s4">
          <div>
            <img src="./assets/新建文件夹/pursue_f5104d2.png" alt="" />
            <p>专业、便捷、安全并驾齐驱，口碑是阿姨帮的立身之本</p>
          </div>
          <div class="s5">
            <ul>
              <li>
                <img src="./assets/新建文件夹/feature1_5159c63.png" alt="" />
                <span>专业</span>
                <p>服务人员严格筛选、择优录取；</p>
                <p>系统培训、专业工具、标准化流程</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/feature2_d6d6598.png" alt="" />
                <span>便捷</span>
                <p>随时随地快速预约；个性化需求智能匹配；</p>
                <p>无需现金，轻松支付</p>
              </li>
              <li>
                <img src="./assets/新建文件夹/feature3_95419e3.png" alt="" />
                <span>安全</span>
                <p>服务人员实名认证；</p>
                <p>上门服务家政险保驾护航</p>
              </li>
            </ul>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="s6">
        <img
          class="person"
          src="./assets/新建文件夹/pepople_3987ad1.png"
          alt=""
        />
        <div class="s7">
          <img src="./assets/新建文件夹/tit4_da9f386.png" alt="" />
          <p class="infortext">
            阿姨帮是一家移动互联网公司，初创团队来自各大互联网上市公司，梦想让我们聚集在一起，为了理想而奋斗。公司在成立之前就获得了雷军/顺为资本的天使投资，是一个提供优质家庭服务和企业后勤服务的平台，用户可以在线预约保洁服务、家电清洗、家居保养、保姆、月嫂、育儿嫂、空气治理、搬家、维修、居家换新等服务，并覆盖北京、上海、广州、深圳、杭州、成都、南京等80多个城市。
          </p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-vertical",
  title: "Vertical slider",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        direction: "vertical",
      },
      now: 0,
      items: [
        "首页",
        "家庭服务",
        "企业服务",
        "城市合伙",
        "关于我们",
        "平台培训中心",
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.s6 {
  position: relative;
  background: url("./assets/新建文件夹/bg5_7711f97.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  .person {
    position: absolute;
    bottom: 0;
    left: 20vw;
  }
  .s7 {
    width: 21vw;
    height: 25vh;
    position: absolute;
    left: 50vw;
    top: 10vh;
    .infortext {
      margin-top: 3vh;
      font-size: 18px;
      color: #333;
      text-align: left;
      line-height: 24px;
    }
  }
}
.s5 {
  ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-top: 7vh;
    li {
      text-align: center;
      span {
        font-size: 22px;
        color: #333;
        display: block;
        margin: 20px 0 10px;
        font-weight: 400;
      }
      p {
        margin: 0;
        padding: 5px 0;
      }
    }
  }
}
.s4 {
  width: 1100px;
  height: 600px;
  margin: auto;
  margin-top: 22vh;
  img {
    display: block;
    margin: auto;
  }
  p {
    text-align: center;
    color: #999;
    margin-top: 1vh;
  }
}
.s3 {
  background: url("./assets/新建文件夹/line_5fec257.png");
  background-repeat: no-repeat;
  background-position-y: 2vh;

  ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-top: 3vh;

    p {
      color: #666666;
    }
  }
}
.s2 {
  width: 1200px;
  height: 800px;
  // background: pink;
  margin: auto;
  margin-top: 22vh;
  img {
    display: block;
    margin: auto;
  }
  p {
    text-align: center;
    color: #999;
    margin-top: 1vh;
  }
}
* {
  margin: 0;
  padding: 0;
}
.join {
  position: fixed;
  box-sizing: border-box;
  padding: 1vw;
  right: 0;
  top: 12vh;
  z-index: 9999;
}
.add {
  position: fixed;
  right: 6vw;
  top: 12.5vh;
  display: none;
}
.join:hover > .add {
  display: block;
}
.wc {
  position: fixed;
  right: 3.5vw;
  bottom: 8vh;
  display: none;
}
.icon:hover > .wc {
  display: block;
}
.wc1 {
  position: fixed;
  right: 3.5vw;
  bottom: 3.5vh;
  display: none;
}
.icon1:hover > .wc1 {
  display: block;
}
.phone {
  position: fixed;
  right: 1vw;
  top: 85vh;
  z-index: 9999;
  .icon {
    width: 55px;
    height: 55px;
    margin-bottom: 1vh;
    background: url("./assets/新建文件夹/icon_a36cf97.png");
    background-size: cover;
    z-index: 10000;
  }
  .icon1 {
    width: 55px;
    height: 55px;
    margin-bottom: 1vh;
    background: url("./assets/新建文件夹/icon2_d91c434.png");
    background-size: cover;
    z-index: 99999;
  }
  .icon2 {
    width: 55px;
    height: 55px;
    background: url("./assets/新建文件夹/icon3_4d34b41.png");
    background-size: cover;
  }
}
.header {
  display: flex;
  height: 5.5vh;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background: #fff;
  width: 100vw;
  border-bottom: 1px solid #00beaf;
  animation: move3 0.8s ease-in forwards;
  ul {
    display: flex;
    list-style: none;
    li {
      margin: 0 1.2vw;
    }
    li:hover > a {
      color: #00beaf;
    }
    a {
      text-decoration: none;
      color: #707070;
      font-size: 16px;

      &.active {
        color: #00beaf;
      }

      // &.router-link-exact-active {
      //   color: #00beaf;
      // }
    }
  }
}
.swiper-slide {
  height: 5.2vh;
}
.s1 {
  margin-top: 5vh;
}
.bg {
  position: relative;
  .m1 {
    animation: move2 1s ease-in forwards;
  }
  .m2 {
    animation: move2 1s ease-in forwards 0.2s;
  }
  .m3 {
    animation: move2 1s ease-in forwards 0.4s;
  }
  .download {
    position: absolute;
    top: 20vh;
    left: 15vw;
    img {
      display: block;
      margin-bottom: 2vh;
      width: 18vw;
    }
  }
  .girl {
    position: absolute;
    bottom: 5vh;
    left: 70vw;
    animation: move1 1s ease-in forwards 0.3s;
    img {
      width: 100%;
    }
  }
}
@keyframes move1 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-500px);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(400px);
  }
}
@keyframes move3 {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
}
</style>